<template>
	<el-tabs v-model="queryParams.tab_check_status" @tab-change="handleChange">
		<template v-for="(item,i) in tabList" :key="'tabList'+i">
			<el-tab-pane :label="item.name" :name="item.name">
				<div v-if="queryParams.tab_check_status=='待处理'" class="article-lists">
					<el-card class="!border-none" shadow="never">
						<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
							<el-form-item label="提交时间">
								<daterange-picker v-model:startTime="queryParams.start_time" v-model:endTime="queryParams.end_time" />
							</el-form-item>
							<el-form-item label="修改人">
								<el-input class="w-[280px]" v-model="queryParams.ce_real_name" clearable />
							</el-form-item>
							<el-form-item label="产品ID">
								<el-input class="w-[280px]" v-model="queryParams.p_sn" clearable />
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="resetPage">查询</el-button>
								<el-button @click="resetParams">重置</el-button>
							</el-form-item>
						</el-form>
					</el-card>
					<el-card class="!border-none" shadow="never">
						<el-table size="large" v-loading="pager.loading" :data="pager.lists">
							<el-table-column label="序号(ID)" prop="id" min-width="80" />
							<el-table-column label="产品ID" min-width="100" prop="product_id"/>
							<el-table-column label="产品分类" min-width="160">
								<template #default="{ row }">
									<el-button type="primary" link>{{row.cate_name}}</el-button>
								</template>
							</el-table-column>
							<el-table-column label="银行" prop="bank_name" min-width="160" />
							<el-table-column label="产品名称" prop="name" min-width="160" />
							<el-table-column label="产品logo" min-width="160">
							  <template #default="{ row }">
							    <image-contain v-if="row.logo" :src="row.logo" :width="60" :height="45" :preview-src-list="[row.logo]" preview-teleported fit="contain" />
							  </template>
							</el-table-column>
							<el-table-column label="修改人" prop="ce_real_name" min-width="120" />
							<el-table-column label="修改人职务" prop="ce_position" min-width="120" />
							<el-table-column label="修改人公司" prop="ce_company_name" min-width="120" />
							<el-table-column label="提交时间" prop="create_time" min-width="180" />
							<el-table-column label="操作" width="180" fixed="right">
								<template #default="{ row }">
									<el-button v-perms="['demand.demand/closeDemand']" type="danger" link @click="handleCheck(row.id,2)">审核驳回</el-button>
									<el-button v-perms="['demand.demand/checkDemand']" type="primary" link @click="handleCheck(row.id,1)">审核通过</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="flex justify-end mt-4">
							<pagination v-model="pager" @change="getLists" />
						</div>
					</el-card>
				</div>
				<div v-if="queryParams.tab_check_status=='已处理'" class="article-lists">
					<el-card class="!border-none" shadow="never">
						<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
							<el-form-item label="审核状态">
								<el-select class="w-80" v-model="queryParams.audit_status" @change="changeAuditStatus" placeholder="请选择" clearable filterable>
									<el-option v-for="item in optionsData.tab_check_status_arr_list" :key="item.id" :label="item.name" :value="item.id" />
								</el-select>
							</el-form-item>
							<el-form-item label="审核人">
								<el-input class="w-[280px]" v-model="queryParams.ca_name" clearable />
							</el-form-item>
							<el-form-item label="渠道名称">
								<el-input class="w-[280px]" v-model="queryParams.ce_real_name" clearable />
							</el-form-item>
							<el-form-item label="产品ID">
								<el-input class="w-[280px]" v-model="queryParams.p_sn" clearable />
							</el-form-item>
							<el-form-item label="审核时间">
								<daterange-picker v-model:startTime="queryParams.check_start_time" v-model:endTime="queryParams.check_end_time" />
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="resetPage">查询</el-button>
								<el-button @click="resetParams">重置</el-button>
							</el-form-item>
						</el-form>
					</el-card>
					<el-card class="!border-none" shadow="never">
						<el-table size="large" v-loading="pager.loading" :data="pager.lists">
							<el-table-column label="序号(ID)" prop="id" min-width="80" />
							<el-table-column label="渠道名称" prop="ce_real_name" min-width="120" />
							<el-table-column label="渠道职务" prop="ce_position" min-width="120" />
							<el-table-column label="公司" prop="ce_company_name" min-width="120" />
							<el-table-column label="提交时间" prop="create_time" min-width="180" />
							<el-table-column label="产品ID" min-width="100" prop="sn"/>
							<el-table-column label="产品名称" prop="name" min-width="160" />
							<el-table-column label="产品logo" min-width="160">
							  <template #default="{ row }">
							    <image-contain v-if="row.logo" :src="row.logo" :width="60" :height="45" :preview-src-list="[row.logo]" preview-teleported fit="contain" />
							  </template>
							</el-table-column>
							<el-table-column label="银行" prop="bank_name" min-width="160" />
							<el-table-column label="最高额度（万）" min-width="160">
								<template #default="{ row }">{{(row.quota/10000).toFixed(4)}}</template>
							</el-table-column>
							<el-table-column label="审核状态" min-width="100">
								<template #default="{ row }">
									<el-button type="text" v-if="row.check_status == 0">审核中</el-button>
									<el-button type="text" v-if="row.check_status == 1">审核通过</el-button>
									<el-button type="text" v-if="row.check_status == 2">审核驳回</el-button>
								</template>
							</el-table-column>
							<el-table-column label="审核人" prop="ca_name" min-width="100" />
							<el-table-column label="审核意见" prop="reason" min-width="100" />
							<el-table-column label="审核时间" prop="check_time" min-width="120" />
						</el-table>
						<div class="flex justify-end mt-4">
							<pagination v-model="pager" @change="getLists" />
						</div>
					</el-card>
				</div>
			</el-tab-pane>
		</template>
		<check_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck"></check_demand>
	</el-tabs>
</template>
<script lang="ts" setup name="demandLists">
	import { channelEditProductlists,channelEditProductDetail,channelEditProductPass,channelEditProductReject } from '@/api/product/editProductlists';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import {getRoutePath} from '@/router';
	import check_demand from './check_demand.vue'
	const tabList = ref([{ name: '待处理', id: ['0'] }, { name: '已处理', id: ['1', '2'] }]);
	let queryParams = reactive({
		tab_check_status: '待处理',
		audit_status: 0,
		check_status: ['0'],
		ce_real_name: '',
		p_sn: '',
		ca_name: '',
		start_time: '',
		end_time: '',
		check_start_time: '',
		check_end_time: ''
	});
	let optionsData = reactive({
		tab_check_status_arr_list: [
			{name:'全部',id:0},
			{name:'审核通过',id:1},
			{name:'审核驳回',id:2},
		]
	});
	
	onMounted(async () => {
		getLists();
	});
	
	const checkState = reactive({
		show: false,
		value: '',
		id: null
	})
	
	const handleCheck = (id:any,value:any) => {
		checkState.show = true
		checkState.id = id
		checkState.value = value
	}
	
	const handleConfirmCheck = async (value : any) => {
		if(checkState.value==1){
			await channelEditProductPass({ id: checkState.id, ...value })
		}else if(checkState.value==2){
			await channelEditProductReject({ id: checkState.id, ...value })
		}
		checkState.show = false
		getLists()
	}
	
	const handleChange = (val : any) => {
		queryParams.check_status = val == '全部' ? ['0', '1', '2'] : val == '待处理' ? ['0'] : val == '已处理' ? ['1', '2'] : [];
		if( val=='已处理' ){
			if( queryParams.audit_status==0 ){
				queryParams.check_status = ['1', '2'];
			}else if( queryParams.audit_status==1 ){
				queryParams.check_status = ['1'];
			}else if( queryParams.audit_status==2 ){
				queryParams.check_status = ['2'];
			}
		}
		getLists();
	}
	
	const changeAuditStatus = (val : any) => {
		if( val==0 ){
			queryParams.check_status = ['1', '2'];
		}else if( val==1 ){
			queryParams.check_status = ['1'];
		}else if( val==2 ){
			queryParams.check_status = ['2'];
		}
	}

	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: channelEditProductlists,
		params: queryParams
	})

</script>